import React,{useState,useEffect} from 'react'
import Luo from 'iscroll-luo';
import axios from 'axios';
function Home() {
    let [arr,setArr] = useState([])
    useEffect(()=>{
          getlist()
    },[])
    let getlist = (ispull) => { // 通过参数来判断是上拉还是下拉
        axios.get("/api/list").then(res=>{
            if (ispull === "xiala") {
                setArr(res.data)
            } else if (ispull === "shangla") {
               setArr([...arr,...res.data])
            } else {
                setArr(res.data)
            }
         
        })
    }
    let onDown = ()=>{ // 下拉刷新
        // this.setState({
        //     data: [1, 2, 3], // 覆盖原始数据
        // });
        getlist("xiala")
      /** 注意此处，就算没有数据或接口调用失败了等情况，也要刷一下原始数据，Luo内部才知道状态更新了 **/
    }
   
    /** 上拉加载更多 **/
    let onUp = ()=>{ // 上拉加载
        // this.setState({
        //     data: [...this.state.data, 1, 2, 3], // 在原始数据后面加更多数据
            
        // });
        getlist("shangla")
      
      /** 注意此处，就算没有更多数据了或接口调用失败了等情况，也要刷一下原始数据，Luo内部才知道状态更新了 **/
    }
    return (
        // 必须有一个容器的包裹
        <div style={{ position: 'relative', height: '100vh' }}>
            <Luo
                id='id'
                onDown={() => onDown()}
                onUp={() => onUp()}
            >
                {
                    arr.map((v, i) =>
                        <div key={i}>
                            <img src={v.img} alt="" />
                            <span>{v.tit}</span>
                        </div>
                    )
                }
            </Luo>
        </div>
    )
}

export default Home